const path = require('path');
// const autoprefixer = require('autoprefixer');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
        // 为动态加载的 Chunk 配置输出文件的名称
        chunkFilename: '[id].js',
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            'presets': ['babel-preset-env'],
                            'plugins': ['syntax-dynamic-import'],
                        },
                    },
                    {
                        loader: 'eslint-loader',
                        options: {
                            failOnWarning: false,
                            failOnError: true,
                            formatter: require('eslint-friendly-formatter'),
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                ],
            },
            {
                test: /\.vue$/,
                use: [
                    {loader: 'vue-loader'},
                ],
            },
            {
                test: /\.less$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                    {
                        loader: 'less-loader',
                        options: {javascriptEnabled: true},
                    },
                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {},
                    },
                ],
            },

        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html',
            inject: 'true',
        }),
        new StyleLintPlugin({
            // 正则匹配想要lint监测的文件
            files: ['src/assets/styles/*.l?(e|c)ss'],
        }),
        new BundleAnalyzerPlugin(),
        new CleanWebpackPlugin(
            ['dist'], // 匹配删除的文件
            {
                root: path.resolve(__dirname, './'), // 根目录
                verbose: true, // 是否启用控制台输出信息
                dry: false, // 设置为false,启用删除文件
            }
        ),
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            '@': path.resolve(__dirname, './src'),
        },
        extensions: ['.js', '.vue', '.css', '.scss'],
    },
};
